<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">

<title>素材火www.sucaihuo.com - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
  content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link href="css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
  rel="stylesheet">
   <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css?v=2.2.0" rel="stylesheet">
</head>

<body class="top-navigation">
  <div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
      <div class="row border-bottom">
        <nav class="navbar navbar-static-top" data-role="navigation" style="margin-bottom:0">
          <div class="navbar-header">
            <div class="minimalize-styl-2">
                       
                  <a class="btn btn-success" title="返回主页" href="main.html"><i class="fa fa-lg fa-home"></i></a>
              <a class="back-link btn btn-success" title="后退"><i class="fa fa-lg fa-arrow-left"></i></a>
              <a class="reload-link btn btn-success" title="重新加载"><i class="fa fa-lg fa-repeat"></i></a>
   
              <!-- 配置点1 -->
              <!-- 上下文导航 -->
              <ol id="guide" class="breadcrumb m-l">
                <li><a>配送中心管理</a></li>
                <li><a>业务管理</a></li> 
                <li><strong>订购排行分析</strong></li>
              </ol>
              
              
            </div>
          </div>
        <div class="nav navbar-top-links navbar-right minimalize-styl-2">
            <span class="m-r-sm text-muted welcome-message btn btn-link">欢迎使用Feces物流管理系统</span>
          </div>
        </nav>
      </div>
      
      
      <!-- 配置点2 -->
      <!-- 内容 -->
      <div class="wrapper wrapper-content animated fadeInRight">
      
 
      <div class="row">
        <div class="col-lg-12">
          <div class="ibox float-e-margins">
        
            <div class="ibox-content">
                <input type="text" class="form-control" id="in_d1"value="开始日期">
                <input type="text" class="form-control" id="in_d2"value="结束日期">
                <button type="button" onclick="doGet();"class="btn btn-primary btn-xm">查询</button>
                <table class="table table-striped table-bordered table-hover "id="editable">
                <thead>
                  <tr>                              
                                            <th>商品ID</th>
                                            <th>商品名称</th>
                                            <th>订购量</th>                                       
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  <!-- Mainly scripts -->
  <script src="js/jquery-2.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
  <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  <script src="js/hplus.js"></script>
  <script src="js/plugins/pace/pace.min.js"></script>
  <script src="js/plugins/toastr/toastr.min.js"></script>
  <script src="js/plugins/datepicker/bootstrap-datepicker.js"></script>
  <!-- Data Tables -->
  <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
  <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
  <!-- Page-Level Scripts -->
  <script>
  var url = "api/BusinessCountServlet";
    $(document).ready(function() {
      $('.dataTables-example').dataTable();

      /* Init DataTables */
      var oTable = $('#editable').dataTable();

      /* Apply the jEditable handlers to the table */
      oTable.$('td').editable('../example_ajax.php', {
        "callback" : function(sValue, y) {
          var aPos = oTable.fnGetPosition(this);
          oTable.fnUpdate(sValue, aPos[0], aPos[1]);
        },
        "submitdata" : function(value, settings) {
          return {
            "row_id" : this.parentNode.getAttribute('id'),
            "column" : oTable.fnGetPosition(this)[2]
          };
        },

        "width" : "90%",
        "height" : "100%"
      });

    });
    function doGet() {
      var d1 = $("#in_d1").val();
      var d2 = $("#in_d2").val();
    $.ajax({
      type: "GET",
      url: url,
      data:{
        date_1 : d1,
        date_2 : d2,
      },
      success: function(result){

      var rs = result.data;
      var cll=rs;
      var lg=cll.length;
      for(var i=0;i<lg;i++){ 
        var cl=cll[i];
        $('#editable').dataTable()
          .fnAddData(
            [ cl.product_id,cl.product.name,cl.product_number]);
      }

      }

      });
      
    }
    </script>
    <script > $(document).ready(function () {

          $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

    });
</script>

  <script type="text/javascript"
    src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
  <!--统计代码，可删除-->

</body>

</html>
